<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>前后端交互</title>
</head>

<body>

    <!-- 
        then 参数中的函数返回值:
            - 1. 返回Promise对象
                - 返回的该实例对象会调用下一个then 
            - 2. 返回普通值
                - 返回的普通值会传递给下一个then,通过then参数中函数的参数接收该值
        => 自己的理解: 
            - 如果返回的是promise,那么执行完该promise之后,才会去调用下一个then,并且将结果放到下一个then的参数中
            - 如果是普通的值, 那么直接放到下一个then的参数中
     -->

    <script>
        function queryData(url) {
            return  new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState != 4) {
                        return;
                    }
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常的情况
                        resolve(xhr.responseText)
                    } else {
                        // 处理异常情况
                        reject('服务器错误');
                    }
                }

                xhr.open('get', url)
                xhr.send(null);
            })
        }

        queryData('http://localhost:3000/data')
        .then(function(data){
            return queryData('http://localhost:3000/data1')
        })
        .then(function(data){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(123);
                },1000)
            })
        })
        .then(function(data){
            // 这里其实会产生一个默认的promise对象,保证可以继续链式操作
            return "hello"
        })
        .then(function(data){
            console.log(data)
        })


    </script>

</body>

</html>